import React, {
  CSSProperties, useEffect, useMemo, useRef
} from 'react';
import { Popconfirm, TooltipProps } from 'antd';
import { LeapIcon, LeapConfirm } from 'leap-components';
import classnames from 'classnames';
import { useI18n } from '@/utils/hooks';
import RcTooltip from '../RcTooltip';
import './index.less';

type RcIconProps = Omit<TooltipProps, 'title' | 'overlayClassName'> & {
  type: string;
  modalType?: 'info' | 'warn' | 'success' | 'error';
  modalTitle?: React.ReactNode;
  modalContent?: React.ReactNode;
  tip?: React.ReactNode;
  msg?: React.ReactNode;
  className?: string;
  style?: CSSProperties;
  disabled?: boolean;
  onClick?: (...args: any[]) => void;
  onConfirm?: (...args: any[]) => void;
  htmlAttr?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
};

const RcIcon: React.FC<RcIconProps> = props => {
  const intl = useI18n();
  const {
    className,
    type,
    style,
    tip,
    msg,
    disabled,
    modalType = 'info',
    modalTitle,
    modalContent,
    htmlAttr,
    onConfirm,
    onClick,
    ...restProps
  } = props;

  const typeTitle = useMemo(
    () => ({
      del: intl('common.modal.title.delTip'),
    }),
    [intl]
  );

  const ref = useRef(null as unknown as HTMLDivElement);

  const handelConfirm = () => {
    if (disabled) {
      return;
    }
    const callBack = onConfirm || onClick;
    callBack?.();
  };

  const handelClick = () => {
    if (disabled) {
      return;
    }
    if (modalContent) {
      LeapConfirm({
        modalType,
        title: modalTitle || typeTitle[type] || intl('common.modal.title.defaultTip'),
        subTitle: <div>{modalContent}</div>,
        className: 'rc-modal-confirm',
        maskClosable: false,
        keyboard: false,
        okText: intl('common.confirm'),
        cancelText: intl('common.cancel'),
        onOk: onConfirm || onClick,
      });

      return;
    }
    onClick?.();
  };

  const getIcon = () => (
    <div
      ref={ref}
      className={classnames('rc-icon', className, {
        'rc-icon_disabeld': disabled,
      })}
      onClick={handelClick}
      {...htmlAttr}
    >
      <LeapIcon type={type} style={style} />
    </div>
  );

  const getTip = () =>
    (tip ? (
      <RcTooltip title={tip} {...restProps}>
        {getIcon()}
      </RcTooltip>
    ) : (
      getIcon()
    ));

  useEffect(() => {
    const dom = ref.current;
    if (!dom) {
      return;
    }
    const svg = dom.querySelector('svg');
    if (!svg) {
      return;
    }
    const svgStyle = svg.getAttribute('style') || '';
    const newStyle = style
      ? Object.keys(style)
        .reduce((arr, key) => {
          arr.push(`${key}:${style[key]}`);

          return arr;
        }, [] as string[])
        .join(';')
      : '';
    svg.setAttribute('style', `${svgStyle}; ${newStyle}`);
  }, []);

  return msg && !disabled ? (
    <Popconfirm
      title={msg}
      onConfirm={handelConfirm}
      okText={intl('common.confirm')}
      cancelText={intl('common.cancel')}
      overlayClassName="rc-icon_popconfirm"
    >
      {getTip()}
    </Popconfirm>
  ) : (
    getTip()
  );
};

export default React.memo(RcIcon);
